<template>
  <div class="account-info">
    <form>
      <div class="account-setting-item">
        <div class="sub-section-title text-center text-md-start">
          <h2 class="sub-section-title-heading">Avatar</h2>
        </div>
        <div class="account-avatar-info">
          <div class="account-avatar-thumb">
            <img :src="require('assets/images/user.jpg')" alt="avatar" />
          </div>
          <ul class="account-avatar-action">
            <li>
              <button class="btn main-btn main-btn-secondary">Upload</button>
            </li>
            <li>
              <button
                class="btn main-btn main-btn-secondary main-btn-bgless main-btn-secondary-bgless"
              >
                Remove
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="divider"></div>
      <div class="account-setting-item">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-20">
              <label>First Name*</label>
              <input
                type="text"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="First name"
              />
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group mb-20">
              <label>Last Name*</label>
              <input
                type="text"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="Last name"
              />
            </div>
          </div>
          <div class="col-12">
            <div class="form-group mb-20">
              <label>Email Address*</label>
              <input
                type="text"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="Email address"
              />
            </div>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label>Phone Number*</label>
              <input
                type="text"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="Phone number"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="account-setting-item">
        <div class="sub-section-title text-center text-md-start">
          <h2 class="sub-section-title-heading">Change Password</h2>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-20">
              <label>Password*</label>
              <input
                type="password"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="Password"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group mb-20">
              <label>New Password*</label>
              <input
                type="password"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="New password"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Confirm Password*</label>
              <input
                type="password"
                name="email"
                class="form-control form-control-background-white"
                required=""
                placeholder="Confirm password"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="account-setting-item account-setting-button">
        <button class="btn main-btn main-btn-secondary">Save Changes</button>
        <button
          class="btn main-btn main-btn-secondary main-btn-bgless main-btn-secondary-bgless"
        >
          Cancel
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
